<template>
  <view class="world-clock-container">
    <view class="header">
      <text class="title">世界时钟</text>
      <view class="add-btn" @click="showAddCity = true">
        <text class="add-text">+</text>
      </view>
    </view>

    <!-- 城市时钟列表 -->
    <scroll-view class="clock-list" scroll-y>
      <view v-for="(city, index) in cityList" :key="index" class="clock-item">
        <view class="city-info">
          <view class="city-name">{{ city.name }}</view>
          <view class="city-country">{{ city.country }}</view>
          <view class="time-diff">{{ getTimeDiff(city.timezone) }}</view>
        </view>
        <view class="city-time">
          <view class="time">{{ getCityTime(city.timezone) }}</view>
          <view class="date">{{ getCityDate(city.timezone) }}</view>
        </view>
        <view class="delete-btn" @click="deleteCity(index)" v-if="!city.isLocal">
          <text class="delete-text">删除</text>
        </view>
      </view>
    </scroll-view>

    <!-- 添加城市弹窗 -->
    <view v-if="showAddCity" class="modal-overlay" @click="showAddCity = false">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">添加城市</text>
          <view class="close-btn" @click="showAddCity = false">×</view>
        </view>
        
        <view class="search-box">
          <input v-model="searchKeyword" placeholder="搜索城市" class="search-input" @input="searchCities" />
        </view>
        
        <scroll-view class="city-search-list" scroll-y>
          <view v-for="city in filteredCities" :key="city.id" class="search-item" @click="addCity(city)">
            <view class="search-city-name">{{ city.name }}</view>
            <view class="search-city-country">{{ city.country }}</view>
            <view class="search-city-time">{{ getCityTime(city.timezone) }}</view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cityList: [
        {
          name: '北京',
          country: '中国',
          timezone: 'Asia/Shanghai',
          isLocal: true
        }
      ],
      showAddCity: false,
      searchKeyword: '',
      availableCities: [
        { id: 1, name: '纽约', country: '美国', timezone: 'America/New_York' },
        { id: 2, name: '洛杉矶', country: '美国', timezone: 'America/Los_Angeles' },
        { id: 3, name: '伦敦', country: '英国', timezone: 'Europe/London' },
        { id: 4, name: '巴黎', country: '法国', timezone: 'Europe/Paris' },
        { id: 5, name: '东京', country: '日本', timezone: 'Asia/Tokyo' },
        { id: 6, name: '首尔', country: '韩国', timezone: 'Asia/Seoul' },
        { id: 7, name: '悉尼', country: '澳大利亚', timezone: 'Australia/Sydney' },
        { id: 8, name: '迪拜', country: '阿联酋', timezone: 'Asia/Dubai' },
        { id: 9, name: '新加坡', country: '新加坡', timezone: 'Asia/Singapore' },
        { id: 10, name: '香港', country: '中国', timezone: 'Asia/Hong_Kong' },
        { id: 11, name: '台北', country: '中国台湾', timezone: 'Asia/Taipei' },
        { id: 12, name: '莫斯科', country: '俄罗斯', timezone: 'Europe/Moscow' },
        { id: 13, name: '柏林', country: '德国', timezone: 'Europe/Berlin' },
        { id: 14, name: '罗马', country: '意大利', timezone: 'Europe/Rome' },
        { id: 15, name: '马德里', country: '西班牙', timezone: 'Europe/Madrid' }
      ],
      timer: null
    }
  },
  
  computed: {
    filteredCities() {
      if (!this.searchKeyword) return this.availableCities
      
      return this.availableCities.filter(city => 
        city.name.toLowerCase().includes(this.searchKeyword.toLowerCase()) ||
        city.country.toLowerCase().includes(this.searchKeyword.toLowerCase())
      )
    }
  },
  
  onLoad() {
    this.loadCities()
    this.startTimer()
  },
  
  onUnload() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  
  methods: {
    startTimer() {
      this.timer = setInterval(() => {
        this.$forceUpdate()
      }, 1000)
    },
    
    getCityTime(timezone) {
      try {
        const now = new Date()
        const options = {
          timeZone: timezone,
          hour12: false,
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit'
        }
        return now.toLocaleTimeString('zh-CN', options)
      } catch (e) {
        return '00:00:00'
      }
    },
    
    getCityDate(timezone) {
      try {
        const now = new Date()
        const options = {
          timeZone: timezone,
          month: '2-digit',
          day: '2-digit'
        }
        return now.toLocaleDateString('zh-CN', options)
      } catch (e) {
        return '01/01'
      }
    },
    
    getTimeDiff(timezone) {
      try {
        const now = new Date()
        const localTime = now.getTime()
        const localOffset = now.getTimezoneOffset() * 60000
        const utc = localTime + localOffset
        
        // 简化的时区偏移计算
        const timezoneOffsets = {
          'Asia/Shanghai': 8,
          'America/New_York': -5,
          'America/Los_Angeles': -8,
          'Europe/London': 0,
          'Europe/Paris': 1,
          'Asia/Tokyo': 9,
          'Asia/Seoul': 9,
          'Australia/Sydney': 11,
          'Asia/Dubai': 4,
          'Asia/Singapore': 8,
          'Asia/Hong_Kong': 8,
          'Asia/Taipei': 8,
          'Europe/Moscow': 3,
          'Europe/Berlin': 1,
          'Europe/Rome': 1,
          'Europe/Madrid': 1
        }
        
        const offset = timezoneOffsets[timezone] || 0
        const localOffset2 = 8 // 北京时间偏移
        const diff = offset - localOffset2
        
        if (diff === 0) return '本地时间'
        if (diff > 0) return `+${diff}小时`
        return `${diff}小时`
      } catch (e) {
        return '本地时间'
      }
    },
    
    addCity(city) {
      const exists = this.cityList.find(c => c.timezone === city.timezone)
      if (exists) {
        uni.showToast({
          title: '城市已存在',
          icon: 'none'
        })
        return
      }
      
      this.cityList.push({
        name: city.name,
        country: city.country,
        timezone: city.timezone,
        isLocal: false
      })
      
      this.saveCities()
      this.showAddCity = false
      this.searchKeyword = ''
      
      uni.showToast({
        title: '添加成功',
        icon: 'success'
      })
    },
    
    deleteCity(index) {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这个城市吗？',
        success: (res) => {
          if (res.confirm) {
            this.cityList.splice(index, 1)
            this.saveCities()
          }
        }
      })
    },
    
    searchCities() {
      // 搜索功能已通过computed实现
    },
    
    saveCities() {
      const citiesToSave = this.cityList.filter(city => !city.isLocal)
      uni.setStorageSync('worldClockCities', citiesToSave)
    },
    
    loadCities() {
      const saved = uni.getStorageSync('worldClockCities')
      if (saved && saved.length > 0) {
        this.cityList = [
          {
            name: '北京',
            country: '中国',
            timezone: 'Asia/Shanghai',
            isLocal: true
          },
          ...saved
        ]
      }
    }
  }
}
</script>

<style scoped>
.world-clock-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 40rpx 30rpx;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #ffffff;
}

.add-btn {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1rpx solid rgba(255, 255, 255, 0.3);
}

.add-text {
  font-size: 36rpx;
  color: #ffffff;
  font-weight: bold;
}

.clock-list {
  height: calc(100vh - 200rpx);
}

.clock-item {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10rpx);
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  border: 1rpx solid rgba(255, 255, 255, 0.2);
}

.city-info {
  flex: 1;
}

.city-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 8rpx;
}

.city-country {
  font-size: 24rpx;
  color: #ffffff;
  opacity: 0.7;
  margin-bottom: 5rpx;
}

.time-diff {
  font-size: 22rpx;
  color: #ffffff;
  opacity: 0.6;
}

.city-time {
  text-align: right;
  margin-right: 20rpx;
}

.time {
  font-size: 40rpx;
  font-weight: bold;
  color: #ffffff;
  font-family: 'Courier New', monospace;
  margin-bottom: 5rpx;
}

.date {
  font-size: 24rpx;
  color: #ffffff;
  opacity: 0.8;
}

.delete-btn {
  padding: 10rpx 20rpx;
  background: rgba(255, 71, 87, 0.2);
  border-radius: 10rpx;
  border: 1rpx solid rgba(255, 71, 87, 0.3);
}

.delete-text {
  font-size: 24rpx;
  color: #ff4757;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  width: 85%;
  height: 70%;
  background: #ffffff;
  border-radius: 20rpx;
  padding: 40rpx;
  display: flex;
  flex-direction: column;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.modal-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
}

.close-btn {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: #999999;
}

.search-box {
  margin-bottom: 30rpx;
}

.search-input {
  width: 100%;
  padding: 20rpx;
  border: 1rpx solid #e0e0e0;
  border-radius: 10rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.city-search-list {
  flex: 1;
}

.search-item {
  display: flex;
  align-items: center;
  padding: 25rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.search-item:last-child {
  border-bottom: none;
}

.search-city-name {
  flex: 1;
  font-size: 32rpx;
  color: #333333;
  font-weight: bold;
}

.search-city-country {
  font-size: 24rpx;
  color: #666666;
  margin-right: 20rpx;
}

.search-city-time {
  font-size: 28rpx;
  color: #667eea;
  font-weight: bold;
  font-family: 'Courier New', monospace;
}
</style>